<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url(https://fonts.googleapis.com/css?family=Lato);
			body {
			  display: flex;
			  height: 100vh;
			  justify-content: center;
			  align-items: center;
			  text-align: center;
			  background: #222;
			}
			
			.btn {
			  position: relative;
			  padding: 1rem 3rem;
			  font-family: Lato, sans-serif;
			  font-size: 1.5rem;
			  line-height: 1.5;
			  color: black;
			  text-decoration: none;
			  background-color: white;
			  border: transparent;
			  outline: transparent;
			  cursor: pointer;
			  user-select: none;
			  white-space: nowrap;
			  overflow: hidden;
			}
			.btn-primary {
			  color: white;
			  background-color: #2980b9;
			}
			.btn-snake-border .btn-borders {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			}
			.btn-snake-border .btn-borders .border-top {
			  position: absolute;
			  top: 0;
			  width: 100%;
			  height: 2px;
			  background: linear-gradient(to right, transparent, white);
			  animation: moveHorizontally 2s linear infinite;
			}
			.btn-snake-border .btn-borders .border-right {
			  position: absolute;
			  right: 0;
			  width: 2px;
			  height: 100%;
			  background: linear-gradient(to bottom, transparent, white);
			  animation: moveVertically 2s 1s linear infinite;
			}
			.btn-snake-border .btn-borders .border-bottom {
			  position: absolute;
			  bottom: 0;
			  width: 100%;
			  height: 2px;
			  background: linear-gradient(to left, transparent, white);
			  animation: moveHorizontally 2s linear reverse infinite;
			}
			.btn-snake-border .btn-borders .border-left {
			  position: absolute;
			  left: 0;
			  width: 2px;
			  height: 100%;
			  background: linear-gradient(to top, transparent, white);
			  animation: moveVertically 2s 1s linear reverse infinite;
			}
			
			@keyframes moveHorizontally {
			  from {
			    transform: translateX(-100%);
			  }
			  to {
			    transform: translateX(100%);
			  }
			}
			@keyframes moveVertically {
			  from {
			    transform: translateY(-100%);
			  }
			  to {
			    transform: translateY(100%);
			  }
			}
		</style>
	</head>
	<body>
		<button class="btn btn-primary btn-snake-border">
		  <div class="btn-borders">
		    <div class="border-top"></div>
		    <div class="border-right"></div>
		    <div class="border-bottom"></div>
		    <div class="border-left"></div>
		  </div>
		  <span class="btn-text">Start</span>
		</button>
	</body>
</html>
